<template>
  <div v-if="show" :id="id" class="nav-titel">
    <div class="text item">
      <el-table
        :class="classType"
        ref="table"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :header-cell-style="{ background: '#3670C2', color: '#fff' }"
        :data="tableData"
        @row-click="rowClickChild"
        style="width: 100%"
        border
        :row-class-name="rowRed ? tableRowClass : ''"
        :max-height="maxH"
      >
        <el-table-column
          v-if="tableSort"
          align="center"
          prop="序号"
          type="index"
          width="50"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index + (valPage - 1) * limit + 1 }}</span>
          </template>
        </el-table-column>
        <template v-for="(item, index) in tableTh">
          <el-table-column
            v-if="typeof item.template == 'function'"
            align="center"
            :key="index"
            :label="item.name"
            :width="item.width"
          >
            <template slot-scope="scope">
              {{ item.template(scope.row[item.prop], scope.row) }}
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="item.default || item.default == 0"
            align="center"
            :key="index"
            :label="item.name"
            :width="item.width"
          >
            <template>
              {{ item.default }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            align="center"
            :prop="item.prop"
            :key="index"
            :label="item.name"
            :width="item.width"
          >
          </el-table-column>
        </template>
        <el-table-column
          v-if="operate"
          label="操作"
          align="center"
          width="100"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              v-for="(it, id) in operateArray"
              @click.stop="operateFun(it.operateFun, it.msg, scope.row)"
              :key="it.name + id"
              :icon="it.icon"
              size="mini"
              type="primary"
              >{{ it.name }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <template v-if="page">
        <el-row style="margin-top: 10px">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <div class="bottomPagination">
                <div class="xd-pagination">
                  <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>

                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="limit"
                    layout="prev, pager,next,jumper,total,sizes"
                    :total="changeCount"
                    :page-sizes="[10, 15, 20, 30]"
                    v-if="changeCount / limit > 1"
                    :current-page="valPage"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
    </div>
  </div>
</template>

<script>
import { log } from "util";
import tableRowClass from "@assets/js/tableRowClass.js";
export default {
  name: "table-card",
  props: {
    maxH: {
      type: String,
      default: "auto",
    },
    operateArray: {
      type: Array,
    },
    operate: {
      type: Boolean,
      default: false,
    },
    rowRed: {
      type: Boolean,
      default: true,
    },
    // 锚点定位需要
    id: {
      type: String,
    },
    // 加入的顺序
    index: {
      type: Number,
    },
    tableSort: {
      type: Boolean,
      default: false,
    },
    // title
    title: {
      type: String,
    },
    // table 样式
    classType: {
      type: String,
      default: "tab-class1",
    },
    // 实现固定头部
    tabHeight: {
      type: String,
    },
    more: {
      type: [Object, String],
    },
    // 搜索
    search: {
      type: Boolean,
      default: false,
    },
    searchName: {
      type: String,
    },
    searchPrompt: {
      type: String,
    },
    // 分页
    page: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 20,
    },
    ajaxMsg: {
      type: Object,
    },
    //传的表的头部信息
    tableTh: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      currentPage4: 4,
      // 隐藏页面
      show: true,
      // 分页
      changeCount: 1,
      valPage: 1,
      // table list
      tableData: [],
      // 搜索
      searchInput: "",
      // loading
      loading: false,
      tableRowClass: tableRowClass,
    };
  },
  created() {
    this.ajaxMsg.data.page = 1;
    this.getTableMsg();
  },
  methods: {
    getTableMsg() {
      this.tableData = [
        {
          date: "2016-05-02",
          verify: "验证",
          water: "I类",
          sw: "23",
          wlg: "21",
          rjy: "22",
          dll: "20",
          zd: "18",
          gmsyzs: "17",
          ad: "16",
          zl: "16",
          zdan: "18",
        },
        {
          date: "2016-05-04",
          verify: "验证",
          water: "I类",
          sw: "23",
          wlg: "21",
          rjy: "22",
          dll: "20",
          zd: "18",
          gmsyzs: "17",
          ad: "16",
          zl: "16",
          zdan: "18",
        },
        {
          date: "2016-05-01",
          verify: "验证",
          water: "I类",
          sw: "23",
          wlg: "21",
          rjy: "22",
          dll: "20",
          zd: "18",
          gmsyzs: "17",
          ad: "16",
          zl: "16",
          zdan: "18",
        },
        {
          date: "2016-05-03",
          verify: "验证",
          water: "I类",
          sw: "23",
          wlg: "21",
          rjy: "22",
          dll: "20",
          zd: "18",
          gmsyzs: "17",
          ad: "16",
          zl: "16",
          zdan: "18",
        },
      ];
      return;
      let that = this;
      this.loading = true;
      this.ajaxMsg.data.limit = this.limit;
      this.$axios
        .post(this.$APIdomain + this.ajaxMsg.url, this.ajaxMsg.data)
        .then((res) => {
          if (res.code == "0") {
            // this.
            this.changeCount = res.count;
            this.tableData = res.data;
            // 传出条数
            this.count = res.count;
            setTimeout(function () {
              // if(that.$refs.table){
              //   that.$refs.table.doLayout()
              // }
              that.loading = false;
              this.show = true;
            }, 100);
          } else {
            setTimeout(function () {
              that.loading = false;
            }, 100);
            this.show = false;
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch(function (error) {
          that.changeCount = 0;
          that.tableData = [];
          // 传出条数
          that.count = 0;
          setTimeout(function () {
            that.loading = false;
          }, 100);
          that.$message({
            message: res.msg,
            type: "warning",
          });
        });
    },
    handleSizeChange(val) {
      this.ajaxMsg.data.limit = val;
      this.limit = val;
      this.getTableMsg();
    },
    // 分页切换按钮事件
    handleCurrentChange(val) {
      this.valPage = val;
      this.ajaxMsg.data.page = this.valPage;
      this.getTableMsg();
    },
    // 搜索
    searchFun(data) {
      // if(this.searchInput == '' || this.searchInput == null){
      //   this.$message.error('请输入搜索内容');
      // }
      this.valPage = 1;
      this.ajaxMsg.data.page = 1;
      this.ajaxMsg.data[this.searchName] = this.searchInput;
      this.getTableMsg();
    },
    // 点击单排
    rowClickChild(row) {
      // 判断是否有传入方法
      if (this.$listeners.rowClick) {
        this.$emit("rowClick", [this.index, row]);
      }
    },
    // 点击操作按钮
    operateFun(name, msg, row) {
      // 判断是否有地
      if (this.$listeners[name]) {
        this.$emit(name, [msg, row, this.index]);
      }
    },
    goToMore(res) {
      // this.$router.push({path: res.url,query: res.parameter })
      this.$router.push({ path: res.url }).catch((err) => {
        console.log(err);
      });
      // this.$router.push({path: res.url,query: res.parameter }).catch(err=>{err});
    },
  },
};
</script>

<style scoped>
.text .el-table {
  font-size: 16px;
}
.search-box {
  display: flex;
  flex-wrap: nowrap;
  width: 400px;
  margin-bottom: 20px;
}
.search-box button {
  margin-left: 20px;
  background-color: #036eb8;
}
</style>
